<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <title>摄影师信息</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        @media screen and (max-width: 2000px) {
            #pgrTitleDiv {
                text-align: center;
                height: 100px;
                width: 1100px;
            }

            .pgrInfoContent {
                width: 300px;
            }

            #dataTable {
                width: 1200px;
            }

            #dataDialog {
                text-align: center;
                width: 1200px;
            }
        }
    </style>
</head>
<body>
<div id="pgrInfoDiv">
    <el-form v-model="form" ref="form">
        <div id="pgrTitleDiv">
            <h3>摄影师信息查询</h3>
            <el-button type="primary" v-on:click="searchAllPgrInfo">显示所有</el-button>
            <el-input v-model="form.pgrName" id="pgrNameContent" class="pgrInfoContent"
                      placeholder="请输入摄影师姓名"></el-input>
            <el-select v-model="form.select" v-bind:placeholder="form.lableValue" v-bind:disabled="form.selectDisable"
                       clearable=true @change="changeValue">
                <el-option
                        v-for="item in company"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
            <el-button type="primary" plain v-on:click="searchPgrInfo">搜索</el-button>
            <el-button type="primary" plain v-on:click="resert">重置</el-button>
            <el-button type="primary" v-on:click="addPgr">添加摄影师</el-button>
        </div>
        <el-table
                id="dataTable"
                :data="tableData"
                max-height="100%">
            <el-table-column
                    id="columnId"
                    fixed
                    prop="id"
                    label="id"
                    width="120">
            </el-table-column>
            <el-table-column
                    id="columnName"
                    prop="name"
                    label="姓名"
                    width="150">
            </el-table-column>
            <el-table-column
                    id="columnGender"
                    prop="gender"
                    label="性别"
                    width="150">
            </el-table-column>
            <el-table-column
                    id="columnAge"
                    prop="age"
                    label="年龄"
                    width="150">
            </el-table-column>
            <el-table-column
                    id="columnTel"
                    prop="mobile"
                    label="联系电话"
                    width="150">
            </el-table-column>
            <el-table-column
                    id="columnComp"
                    prop="company"
                    label="所属公司"
                    width="200">
            </el-table-column>
            <el-table-column
                    id="columnTime"
                    fixed="right"
                    label="可预约时间"
                    width="100">
                <template slot-scope="scope">
                    <el-button
                            @click="dialogTableVisible = true"
                            v-on:click="showTimeInfo(scope)"
                            type="text">
                        查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    id="columnEdit"
                    fixed="right"
                    label="操作"
                    width="80">
                <template slot-scope="scope">
                    <el-button
                            v-on:click="editPgrInfo(scope)"
                            type="text"
                            size="small">
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
    <el-dialog id="dataDialog" title="可预约时间" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
            <el-table-column property="date" label="日期" width="100"></el-table-column>
            <el-table-column property="session1" label="上午第一场" width="100"></el-table-column>
            <el-table-column property="session2" label="上午第二场" width="100"></el-table-column>
            <el-table-column property="session3" label="下午第一场" width="100"></el-table-column>
            <el-table-column property="session4" label="下午第二场" width="100"></el-table-column>
        </el-table>
    </el-dialog>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //所属公司选择框的值
    var company = [{
        value: '2',
        label: 'yige',
    }, {
        value: '3',
        label: 'fuyou',
    }, {
        value: '4',
        label: 'qinyu',
    }, {
        value: '5',
        label: 'xiaoying',
    },];
    var vm = new Vue({
        el: "#pgrInfoDiv",
        data: {
            form: {
                pgrName: '', //搜索栏姓名框
                pgrComp: '', //搜索栏公司框
                select: '',  //搜索栏
                lableValue: "选择所属公司", //搜索栏文本
                selectDisable: false //搜索栏是否可选
            },
            dialogTableVisible: false, //预约时间
            gridData: new Array(),//预约时间表
            selectValue: "", //所选公司的值
            company: company, //可选公司的值
            tableData: new Array() //摄影师信息表

        },
        //初始化方法
        beforeMount: function () {
            var value = this.selectValue;

            //获取当前登录的人的管理权限，根据权限控制公司检索框
            axios.post('/pgrInfo/getAuthority', {})
                .then(function (response) {
                    sessionStorage.setItem('authority', response.data.authority);
                    if (response.data.authority == "2") {
                        vm.form.lableValue = "yige";
                        vm.selectValue = "2";
                        vm.form.selectDisable = true;
                    } else if (response.data.authority == "3") {
                        vm.form.lableValue = "fuyou";
                        vm.selectValue = "3";
                        vm.form.selectDisable = true;
                    } else if (response.data.authority == "4") {
                        vm.form.lableValue = "qinyu";
                        vm.selectValue = "4";
                        vm.form.selectDisable = true;
                    } else if (response.data.authority == "5") {
                        vm.form.lableValue = "xiaoying";
                        vm.selectValue = "5";
                        vm.form.selectDisable = true;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

            //根据公司框检索所有摄影师的信息
            axios.post('/pgrInfo/getAllInfo', {
                company: value,
            })
                .then(function (response) {
                    vm.tableData = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });

        },
        methods: {
            //选择框的值变化时调用
            changeValue: function (value) {
                this.selectValue = value;
            },
            //显示所有摄影师的信息
            searchAllPgrInfo: function () {
                var value = this.selectValue;
                alert(value);
                axios.post('/pgrInfo/getAllInfo', {
                    company: value,
                })
                    .then(function (response) {

                        vm.tableData = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            //根据检索框检索显示摄影师的信息
            searchPgrInfo: function () {
                var value = this.selectValue;
                var name = this.form.pgrName;
                axios.post('/pgrInfo/searchPgrInfo', {
                    name: name,
                    company: value,
                })
                    .then(function (response) {
                        vm.tableData = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //重置选择框的内容
            resert: function () {
                this.form.pgrName = "";
            },
            //查看摄影师可预约时间
            showTimeInfo: function (scope) {
                axios.post('/pgrInfo/getRota', {
                    id: scope.row.id
                })
                    .then(function (response) {
                        vm.gridData = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //添加摄影师
            addPgr: function () {
                window.location.href = "/pgrInfo/pgrInfoAdd";
            },
            //编辑摄影师的信息
            editPgrInfo: function (scope) {
                axios.post('/pgrInfo/getDetails', {
                    id: scope.row.id
                })
                    .then(function (response) {
                        var newid = response.data.id;
                        if (newid == scope.row.id) {
                            sessionStorage.setItem('id', response.data.id);
                            sessionStorage.setItem('name', response.data.name);
                            sessionStorage.setItem('gender', response.data.gender);
                            sessionStorage.setItem('age', response.data.age);
                            sessionStorage.setItem('mobile', response.data.mobile);
                            sessionStorage.setItem('company', response.data.company);
                            sessionStorage.setItem('time', response.data.time);
                            sessionStorage.setItem('username', response.data.username);
                            sessionStorage.setItem('password', response.data.password);
                            sessionStorage.setItem('status', response.data.status);
                            window.location.href = "/pgrInfo/pgrInfoManage";
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        }
    });
</script>
</html>
